<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>寇新峰的demo8-1</title>
</head>
<style>
    * {
        margin: 0px;
        border: 0px;
        padding: 0px;
    }
    #a1 {
        width: 602px;
        height: 42px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid grey;
    }
    .a1-1 {
        text-align: center;
        font: 12px/26px '微软雅黑';
        color: rgb(8, 8, 8);
        background-color: gold;
    }
    .a1-2 {
        width: 60px;
        height: 26px;
        margin: 0 5px 0 0;
    }
    .a1-3 {
        width: 60px;
        height: 26px;
        margin: 0 0 0 5px;
    }
    .a1-5 {
        width: 26px;
        height: 26px;
        margin: 0 5px;
    }
    .a1-6 {
        width: 15px;
        height: 32px;
        background-color: white;
    }
</style>
<body>
    <div id="a1">
        <div class="a1-1 a1-2">上一页</div>
        <div class="a1-1 a1-5">1</div>
        <div class="a1-1 a1-5">2</div>
        <div class="a1-1 a1-5">3</div>
        <div class="a1-1 a1-5">4</div>
        <div class="a1-1 a1-6">...</div>
        <div class="a1-1 a1-5">17</div>
        <div class="a1-1 a1-5">18</div>
        <div class="a1-1 a1-5">19</div>
        <div class="a1-1 a1-5">20</div>
        <div class="a1-1 a1-3">下一页</div>
    </div>
</body>
</html>